<template>
  <div class="myaccount">

        <div class="userInfo">
            <div class="row-title row-item">
                <!--<div class="col-item col-title">我的奖金总额</div>-->
                <!--<div class="col-item col-title">待结算金额</div>-->
                <!--<div class="col-item col-title">推广用户数</div>-->
              <!--修改-->
              <div class="col-item col-titles">注册用户数</div>
              <div class="col-item col-titles">充值用户数</div>
              <div class="col-item col-titles">用户充值总额</div>
            </div>
            <div class="count-item">
                <div  class="col-items" >{{ spreadUserCount }}</div>
                <div  class="col-items" >{{ chargeUser }}</div>
                <div  class="col-items" >{{ totalRecharge | formatter }}</div>
            </div>
            <div class="undeline"></div>
        </div>
      <div class="customer-list" >
          <div class="row-item">
              <div  class="col-item col-title">统计时间</div>
              <div  class="col-item col-title">注册用户数</div>
              <div  class="col-item col-title">充值用户数</div>
              <div  class="col-item col-title">用户充值金额</div>
          </div>
          <mt-loadmore class="data-list" v-if="tableData" :bottom-method="loadBottom"
                       :bottom-all-loaded="allLoaded" :bottomPullText='bottomText' :bottomDistance="40"
                       ref="loadmore" @bottom-status-change="handleChange">
              <div class="row-item" v-for="item in tableData" :key="item.statisticDate" @click="refuseList(item.statisticDate,item.spreadCode)">
                  <div class="col-item">{{dateFormat(item.statisticDate)}}</div>
                  <div  class="col-item">{{ item.regUserCount }}</div>
                  <div class="col-item">{{ item.chargeUserCount }}</div>
                  <div class="col-item">{{ item.userChargeTotal | formatter}}</div>
              </div>
              <div class="loadOver" ref="loadOver">加载完毕</div>
          </mt-loadmore>

      </div>

      <mt-tabbar v-model="tabLink" class="tabbar" @click.native="tabChange">
        <mt-tab-item id="/index" :class="tabLink == '/index' ? 'is_selected' : ''">
            <img slot="icon" src="../../assets/home.png">
          推广链接
        </mt-tab-item>
        <mt-tab-item id="/myaccount" :class="tabLink == '/myaccount' ? 'is_selected' : ''">
            <img slot="icon" src="../../assets/mine.png">
          推广日报
        </mt-tab-item>

      </mt-tabbar>

  </div>
</template>

<script>

  export default {
      name: 'myaccount',
      data () {
          return {
              tabLink:'/myaccount',
              tableData:[],
              pagesize:10,
              total:0,
              pageIndex:1,
              pageCount:0,
              listHeight:420,
              spreadUserCount:0,
              chargeUser:0,
              totalRecharge:0,
              userRechargeTotal:0,
              bottomText:'上拉加载更多...',
              allLoaded: false,
          }
      },
      created() {
          const self = this;
          //页面加载前
          var rq_data = JSON.parse(localStorage.getItem('rq_data'));

          if(!rq_data) {
              self.$toast({
                  message:'请先登录再进行操作',
                  duration:2000
              });
              setTimeout(() => {
                  self.$router.push('/login');
              }, 2000);
          }else{
                self.getData();
          }
      },
    filters:{
      formatter:function (value) {
          var count = 0;
        console.log(value);
        if(value){
          count = (value/100).toFixed(2);

        }else {
          count =count.toFixed(2);
        }
        return count;
      }
    },
      mounted() {
          //监听分页，加载数据
      },
      methods:{
          tabChange(){
              this.$router.push({path:this.tabLink});
          },
         refuseList(index,code){
           this.$router.push({path:'/myaccount/refuse?time='+ index + '&spreadCode='+ code});
        },
          getData(){
              const self = this;
              var param = {
                  paged:{
                      pageIndex:1,
                      pageSize:self.pagesize
                  }
              };

              var paramObj = {
                  'apiName':'youyu.statistic.queryAllSpreadDayDataByLoginSpread',
                  'param':param
              };
              self.$mPost(paramObj,function(callbackData){
                  self.totalRecharge = callbackData.data.data.userRechargeTotal ? callbackData.data.data.userRechargeTotal : 0;
                  self.spreadUserCount = callbackData.data.data.spreadUserCount ? callbackData.data.data.spreadUserCount : 0;
                  self.chargeUser = callbackData.data.data.chargeUserCount ? callbackData.data.data.chargeUserCount : 0;
                  self.tableData = callbackData.data.data.pageResult.data;
                  self.total = callbackData.data.data.pageResult.total + 1;
                  if(self.total <= self.pagesize){
                      self.allLoaded = true;
                  }
                  self.pageCount = Math.ceil(self.total/self.pagesize)+1;

              },function(errCallbackData){
                  self.$toast({
                      message:errCallbackData.data.message,
                      duration:2000
                  });
                  setTimeout(() => {
                      self.$router.push('/login');
                  }, 2000);

              },function(catchCallbackData){
                  self.$toast({
                      message:catchCallbackData.message,
                      duration:2000
                  });
              });
          },
          //时间格式化
          dateFormat:function(date) {
              if (date == undefined || !date) {
                  return "";
              }
              return this.$moment(date).format("YYYY-MM-DD");
          },
          loadBottom() {
              this.pageIndex += 1;
              if (this.pageIndex == this.pageCount) {
                  this.allLoaded = true;
                  this.$refs.loadOver.style.display = "block";
                  return ;
              }

              setTimeout(() => {
                  const self = this;
                  var param = {
                      paged:{
                          pageIndex:self.pageIndex,
                          pageSize:self.pagesize
                      },
                    isFirst : false,
                  };

                  var paramObj = {
                      'apiName':'youyu.statistic.queryAllSpreadDayDataByLoginSpread',
                      'param':param
                  };
                  self.$mPost(paramObj,function(callbackData){
                      self.tableData = self.tableData.concat(callbackData.data.data.pageResult.data);
                      self.$refs.loadmore.onBottomLoaded();
                  },function(errCallbackData){
                      self.$toast({
                          message:errCallbackData.data.message,
                          duration:2000
                      });
                      setTimeout(() => {
                          self.$router.push('/login');
                      }, 2000);

                  },function(catchCallbackData){
                      self.$toast({
                          message:catchCallbackData.message,
                          duration:2000
                      });
                  });
              }, 100);
          },
        handleChange(status){
        }

      }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .myaccount{
        width:100%;
        height:100%;
        overflow: hidden;
    }
    .tabbar{
        background:#26A2FF;
        color:#fff;
    }

    .is_selected {
        background:#FF8F2A !important;
        color:#fff !important;
    }

    .customer-list{
        overflow: hidden;
    }

    .userInfo{
        margin-bottom:5px;
    }
    .col-item{

        text-align:center !important;
        width:25%;
        float:left;
        padding:10px 0;
        overflow: hidden;

        background-image:linear-gradient(180deg, #fff, #fff 50%, transparent 50%);;
    }
    .col-items{

      text-align:center !important;
      width:33%;
      float:left;
      padding:10px 0;
      overflow: hidden;

      background-image:linear-gradient(180deg, #fff, #fff 50%, transparent 50%);;
    }
    .col-titles{
        font-size:14px;
        width:33%;
        font-weight: bolder;
    }
    .col-title{
      font-size:14px;
      width:25%;
      font-weight: bolder;
    }

    .count-item .col-item{
        padding:10px 0 !important;
    }

    .row-item{
        overflow: hidden;
    }

    .row-title{
        font-size:14px;
    }
    .count-item{
        font-size:18px;
        font-weight: bolder;
        overflow: hidden;
    }

    .undeline{
        height:1px;
        width:100%;
        margin:0 !important;
        background:#20A0FF;
        position:absolute;
        left:0;
    }

    .data-list{
        overflow: hidden;
        overflow-y: scroll;
        height:420px;
    }

    .loadOver{
        height:50px;
        line-height:50px;
        width:100%;
        position:absolute;
        bottom:0px;
        z-index:99;
        background:#fff;
        display:none;
    }

</style>
